<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>班级管理</title>
    <link href="/assets/images/favicon.ico" rel="icon">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="/assets/module/admin.css?v=318"/>

    <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="/assets/js/common.js?v=318"></script>

    <style>
        .layui-table-page {
            position: relative;
            margin-top: 0px; /* 可根据需要调整上边距 */
        }

        .layui-table-box {
            margin-bottom: 10px;
        }

        /* Search bar style (仿照学员管理的样式) */
        .search-bar {
            padding: 10px;
        }

        .layui-form-item .layui-inline {
            margin-bottom: 10px;
        }
    </style>

    <script type="text/javascript">
        var url = window.location.pathname.substring(1);
        var item = url.split("/");
        var C = item[0];
        var A = item[1];
        var cUrl = "/" + C;
    </script>
</head>

<body>
<div>
    <div class="layui-card">
        <div class="layui-card-header search-bar">
            <form class="layui-form">
                <div class="layui-form-item">
                    <!-- 班级名称 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">班级名称</label>
                        <div class="layui-input-inline">
                            <input id="tbClassName" type="text" name="className" placeholder="请输入班级名称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 班主任 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">班主任</label>
                        <div class="layui-input-inline">
                            <input id="tbChargerName" type="text" name="chargerName" placeholder="请输入班主任姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 时间范围 -->
<!--                    <div class="layui-inline">-->
<!--                        <label class="layui-form-label">时间范围</label>-->
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" id="tbDateRange" name="dateRange" placeholder="请选择时间范围"-->
<!--                                   autocomplete="off" class="layui-input">-->
<!--                        </div>-->
<!--                    </div>-->
                    <!-- 查询按钮 -->
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: auto;">
                            <button id="search" class="layui-btn" lay-submit="" lay-filter="searchForm">
                                <i class="layui-icon layui-icon-search"></i> 查询
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="layui-card-body">
<!--            <div style="margin: 20px;">-->
<!--                <button id="add" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-add-1"></i> 新增班级-->
<!--                </button>-->
<!--            </div>-->
            <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
            <div class="layui-table-page"></div> <!-- 将分页栏放置在这里 -->
            <script type="text/html" id="barTable">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-xs" lay-event="chakan">查看班级学员</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script type="text/html" id="studentBarTable">
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="resetPassword">重置密码</a>
            </script>

            <script th:inline="none">
                layui.use(['table', 'form', 'layer', 'laydate'], function () {
                    var $ = layui.jquery;
                    var layer = layui.layer;
                    var form = layui.form;
                    var table = layui.table;
                    var laydate = layui.laydate;

                    // 初始化日期选择器
                    laydate.render({
                        elem: '#tbDateRange',
                        type: 'date',
                        range: true // 启用范围选择
                    });

                    // 表格渲染
                    table.render({
                        elem: '#tableList',
                        url: '/class/list',  // 改为班级管理的接口
                        cols: [[
                            {
                                title: '序号', width: 80, templet: function (d) {
                                    return d.LAY_TABLE_INDEX + 1;
                                }
                            },
                            {field: 'className', title: '班级名称', width: 200},
                            {field: 'chargerName', title: '班主任', width: 150},
                            {field: 'monitorName', title: '班长', width: 150},
                            {field: 'num', title: '人数', width: 150},
                            {field: 'projectName', title: '培训名称', width: 200},
                            {fixed: 'right', title: '操作', toolbar: '#barTable', width: 280}
                        ]],
                        page: true,
                        limit: 10,
                        limits: [10,50, 100, 150, 200],
                        id: 'tableList',
                        done: function(e){
                            $('.layui-table').css("width", "100%");
                            $("th[data-field='delete']").css("border-right", 'none');
                        }
                    });

                    // 点击查询按钮
                    $('#search').click(function () {
                        var className = $('#tbClassName').val();
                        var chargerName = $('#tbChargerName').val();
                        var dateRange = $('#tbDateRange').val(); // 获取时间范围
                        var dateStart = null;
                        var dateEnd = null;

                        // 如果有时间范围，进行拆分
                        if (dateRange) {
                            var dateParts = dateRange.split(' - ');
                            dateStart = dateParts[0];
                            dateEnd = dateParts[1];
                        }

                        var index = layer.msg('查询中，请稍后...', {
                            icon: 16,
                            time: false,
                            shade: 0
                        });
                        setTimeout(function () {
                            table.reload('tableList', {
                                url: '/class/list',  // 改为班级管理的接口
                                method: 'GET',
                                where: {
                                    className: className,
                                    chargerName: chargerName,
                                    startDate: dateStart,
                                    endDate: dateEnd,
                                },
                                page: {
                                    curr: 1 // 从第一页开始
                                }
                            });
                            layer.close(index);
                        });
                    });

                    // 监听工具条
                    table.on('tool(tableList)', function (obj) {
                        var data = obj.data;
                        if (obj.event == 'del') {
                            var classId = data.id; //

                            layer.confirm('真的要删除该班级吗？', function (index) {
                                var postData = {
                                    classId: classId  // 将classId放入postData对象
                                };
                                $.ajax({
                                    type: 'POST',
                                    url: "/class/del",  // 删除班级接口
                                    data: postData,
                                    dataType: 'json',
                                    success: function (res) {
                                        if (res.code == 0) {
                                            console.log(res.code)
                                            $('#search').click();
                                            layer.msg(res.msg);
                                        }else if (res.code == 400)
                                        {
                                            console.log("ssssssssssss");
                                            console.log(res.code);
                                            layer.msg(res.msg);
                                        }
                                        else {
                                            layer.msg(res.msg, {icon: 2, anim: 6});
                                        }
                                    }
                                });
                                layer.close(index);
                            });
                        } else if (obj.event == 'edit') {
                            // 打开编辑弹窗
                            layer.open({
                                type: 2, // iframe 类型
                                title: '编辑班级信息',
                                fixed: false,
                                maxmin: true,
                                area: ['400px', '300px'], // 弹窗尺寸
                                content: '/class/edit?id=' + data.id // 编辑页面的路径
                            });
                        } else if (obj.event == 'chakan') {
                            // 查看班级学员弹窗
                            layer.open({
                                type: 2, // iframe 类型
                                title: '班级学员列表',
                                fixed: false,
                                maxmin: true,
                                area: ['80%', '80%'], // 弹窗宽高
                                content: '/class/students?id=' + data.id // 学员页面路径
                            });
                        }

                    });

                    // 监听工具条
                    table.on('tool(studentTable)', function (obj) {
                        var data = obj.data;
                        if (obj.event == 'resetPassword') {
                            layer.confirm('确认重置密码(123456)吗？', function (index) {
                                $.ajax({
                                    type: 'POST',
                                    url: '/student/resetPassword',  // 重置密码的接口
                                    data: {id: data.id},
                                    dataType: 'json',
                                    success: function (res) {
                                        if (res.code == 0) {
                                            layer.msg('密码重置成功');
                                        } else {
                                            layer.msg(res.msg, {icon: 2, anim: 6});
                                        }
                                    }
                                });
                                layer.close(index);
                            });
                        }
                    });

                    // 新增班级
                    // $('#add').click(function () {
                    //     layer.open({
                    //         type: 2,
                    //         title: '新增班级',
                    //         fixed: false,
                    //         maxmin: true,
                    //         area: ['800px', '300px'],
                    //         content: '/class/form?id=0'
                    //     });
                    // });
                });
            </script>
        </div>
    </div>
</div>
</body>
</html>
